import {
    AfterContentChecked,
    AfterContentInit,
    AfterViewChecked,
    AfterViewInit,
    DoCheck,
    OnChanges,
    OnDestroy,
    OnInit,
    SimpleChanges
} from '@angular/core';
import { Component, Input } from '@angular/core';

import { LoggerService } from './logger.service';

let nextId = 1;

@Component({
    selector: 'guide-peek-a-boo',
    template: '<p>Now you see my hero {{name}}</p>',
    styles: ['p {background: LightYellow; padding: 8px}'],
    providers: [LoggerService]
})
export class PeekABooComponent implements OnInit, OnChanges, DoCheck,
    AfterViewInit, AfterViewChecked, AfterContentInit, AfterContentChecked, OnDestroy {
    @Input() name: string;
    private verb = 'initialized';

    constructor(private logger: LoggerService) {
        let is = this.name ? 'is' : 'is not';
        this.logIt(`name ${is} known at construction`);
    }

    // implement OnInit's `ngOnInit` method
    ngOnInit() { this.logIt(`OnInit`); }

    // only called for/if there is an @input variable set by parent.
    ngOnChanges(changes: SimpleChanges) {
        let changesMsgs: string[] = [];
        for (let propName in changes) {
            if (propName === 'name') {
                let name = changes['name'].currentValue;
                changesMsgs.push(`name ${this.verb} to "${name}"`);
            } else {
                changesMsgs.push(propName + ' ' + this.verb);
            }
        }
        this.logIt(`OnChanges: ${changesMsgs.join('; ')}`);
        this.verb = 'changed'; // next time it will be a change
    }
    // Beware! Called frequently!
    // Called in every change detection cycle anywhere on the page
    ngDoCheck() { this.logIt(`DoCheck`); }

    ngAfterContentInit() { this.logIt(`AfterContentInit`); }

    // Beware! Called frequently!
    // Called in every change detection cycle anywhere on the page
    ngAfterContentChecked() { this.logIt(`AfterContentChecked`); }

    ngAfterViewInit() { this.logIt(`AfterViewInit`); }

    // Beware! Called frequently!
    // Called in every change detection cycle anywhere on the page
    ngAfterViewChecked() { this.logIt(`AfterViewChecked`); }

    ngOnDestroy() { this.logIt(`OnDestroy`); }
    logIt(msg: string) {
        this.logger.log(`#${nextId++} ${msg}`);
    }
}